<!DOCTYPE html>
<html>
    <head>
	 <link rel="stylesheet" type="text/css" href="/styles/index.css">
	 <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.css" />
	 <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css" />
	 <link href="/styles/global.css" rel="stylesheet">
     <link href="/styles/styles.css" rel="stylesheet">
	 <!--[if lt IE 9]>
	     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    	 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->	 
	 <style type="text/css">
		.userItem{
		  border:1px solid #e5e5e5;
		  height:12%;
		}
		
		.im-ms-header{
			float:left;width:100%;
		}
		
		.userItem:hover{
			background-color:#e5e5e5;
		}
		
		.im-ms-header img{
			width: 100%;border-radius: 50rem;box-sizing: border-box;border: 1px solid #e5e5e5;height: 100%;
		}
		.userItem img{
		   width: 100%;border-radius: 50rem;box-sizing: border-box;border: 1px solid #e5e5e5;height: 100%;
		}
		
		.img-box{
		   float:left;width: 4rem;box-sizing: border-box;margin-top:2px;height: 4rem;
		}
		
		.user-box{
		   float:left;text-align:center;font-size:1.4rem;margin-top:2px;
		}
		
		.unread-box{
			   float:left;width: 1rem;border-radius: 20rem;box-sizing:border-box;background-color:red;
               border: 1px solid #e5e5e5;margin-top:2px;height: 1rem;
		
		}
	 </style>
    </head>
  <body>
  <div id="contianer">
     <input type="hidden" id="userId" name="userId" value="${userId}"/>
      <div id="zone-header" style="width: 60%;height:50px;line-height:50px;margin: 0 auto;overflow: hidden;background: #96b97d;">
      	<div id="zone-title" style="float:left;font-size:1.4rem">
      		<p>Web IM</p>
      	</div>
      	<div id="userOnlines" style="float:right;font-size:1.4rem">
      	
      	</div>
      </div>
      <div id="zone-body" style="width:60%;margin: 0 auto;">
      	<div id="zone-body-left" style="width:30%;float:left;">
		    <div class="panel panel-default" style="height:500px; " >
				<#list allUsers as user>
				   <#if user.userId != userId>  
					<div class="userItem">
		    		   <div class="img-box">
		    		   	  <!-- <img src="${user.headerImgUrl}"/> -->
		    		   </div>
		    		   <div  class="user-box">
		        		 	${user.nickName}
		        	   </div>
		        	   <div class="unread-box" id="unreadBox${user.userId}" style="display:none;"></div>
		        	   <input type="hidden" name="otherUserId" value="${user.userId}"/>
		        	</div>
		          <#else>
		          	<!--  <input type="hidden" id="headerImg" name="headerImg" value="${user.headerImgUrl}"/> -->
		          	 <input type="hidden" id="nickName" name="nickName" value="${user.nickName}"/>
		          </#if>
				 </#list>
		    		
		   </div>
      	</div>
      	<div id="zone-body-right" style="float:left;width:70%">
      	     <div class="im-ms-header">
      	     <div class="panel panel-default" style="margin-bottom:0px;height:52px;" >
      	     	<#list allUsers as user>
				 <#if user_index ==0>  
		    		   <div class="img-box">
		    		   	<!--   <img src="${user.headerImgUrl}"/> -->
		    		   </div>
		    		   <div  class="user-box">
		        		 	${user.nickName}
		        	   </div>
		        	   <input type="hidden"  name="otherUserId" value="${user.userId}"/>
		        </#if>
				 </#list>
				 </div>
      	     </div>
      	     <div id="im-ms-detial" style="float:left;width:100%">
      	        <div class="panel panel-default" style="height:348px;margin-bottom:0px" >
      	       		<div class="bubbleDiv"></div>
				</div>
      	     </div>
      	     <div id="im-ms-reply" style="float:left;width:100%;">
	      	    <div class="panel panel-default" style="height:100px;margin-bottom:0px" >
	      	        <textarea class="form-control" id="sendInfo" style="width:100%;height:60px;border:none;" rows="3"></textarea>
	      	    	<input type="button" id="send-btn" class="btn btn-default" style="margin-left:90%;"  value="发送"/>
				</div>
      	     </div>
      	</div>
      </div>
  </div>
  </body>
   <!-- jquery -->
   <script src="/js/jquery-1.12.4.min.js"></script>
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="/js/chat.js"></script>
   <script src="/js/index.js"></script>
</html>
